<template>
    <div class="particle-container particle-bg">
        <canvas ref="particleCanvas" class="particle-canvas"></canvas>
        <div class="content-overlay">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    color: {
        type: String,
        default: '#4F46E5',
    },
    particleCount: {
        type: Number,
        default: 100,
    },
    speed: {
        type: Number,
        default: 1,
    },
    lineOpacity: {
        type: Number,
        default: 0.15,
    },
})

const particleCanvas = ref<HTMLCanvasElement | null>(null)
let animationFrame: number | null = null
let ctx: CanvasRenderingContext2D | null = null
let particles: Particle[] = []
let width = 0
let height = 0

interface Particle {
    x: number
    y: number
    vx: number
    vy: number
    size: number
    color: string
}

const initCanvas = () => {
    if (!particleCanvas.value) return

    const canvas = particleCanvas.value
    ctx = canvas.getContext('2d')
    if (!ctx) return

    // Set canvas size to match container
    const resizeCanvas = () => {
        const container = canvas.parentElement
        if (container) {
            width = container.clientWidth
            height = container.clientHeight
            canvas.width = width
            canvas.height = height

            // Recreate particles when canvas is resized
            createParticles()
        }
    }

    // Listen for resize events
    window.addEventListener('resize', resizeCanvas)
    resizeCanvas()

    // Start animation
    animate()
}

const createParticles = () => {
    particles = []
    const baseColor = props.color
    const count = props.particleCount

    for (let i = 0; i < count; i++) {
        const size = Math.random() * 2 + 0.5
        particles.push({
            x: Math.random() * width,
            y: Math.random() * height,
            vx: (Math.random() - 0.5) * props.speed,
            vy: (Math.random() - 0.5) * props.speed,
            size,
            color: baseColor,
        })
    }
}

const animate = () => {
    if (!ctx) return

    // Clear canvas
    ctx.clearRect(0, 0, width, height)

    // Update and draw particles
    for (let i = 0; i < particles.length; i++) {
        const p = particles[i]

        // Update position
        p.x += p.vx
        p.y += p.vy

        // Wrap around edges
        if (p.x < 0) p.x = width
        if (p.x > width) p.x = 0
        if (p.y < 0) p.y = height
        if (p.y > height) p.y = 0

        // Draw particle
        ctx.beginPath()
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
        ctx.fillStyle = p.color
        ctx.fill()

        // Draw connections
        for (let j = i + 1; j < particles.length; j++) {
            const p2 = particles[j]
            const dx = p.x - p2.x
            const dy = p.y - p2.y
            const distance = Math.sqrt(dx * dx + dy * dy)

            if (distance < 100) {
                ctx.beginPath()
                ctx.moveTo(p.x, p.y)
                ctx.lineTo(p2.x, p2.y)
                ctx.strokeStyle = `rgba(79, 70, 229, ${props.lineOpacity * (1 - distance / 100)})`
                ctx.stroke()
            }
        }
    }

    // Continue animation loop
    animationFrame = requestAnimationFrame(animate)
}

onMounted(() => {
    initCanvas()
})

onUnmounted(() => {
    if (animationFrame !== null) {
        cancelAnimationFrame(animationFrame)
    }
    window.removeEventListener('resize', initCanvas)
})
</script>

<style scoped>
.particle-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.particle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
</style>
